<template>
    <view :style="{ '--color': color }">
        <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
        <swiper
            class="Swiper"
            :indicator-dots="false"
            :autoplay="false"
            circular
            :interval="3000"
            :duration="1000">
            <swiper-item v-for="(item, index) in banner" :key="index">
                <image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
            </swiper-item>
        </swiper>

        <view class="Nav">
            <scroll-view :scroll-x="true" :scroll-into-view="scrollintoview" class="u-tabs nowrap">
                <view
                    class="list"
                    :class="{ Active: index == current }"
                    :id="`tabs${index}`"
                    v-for="(item, index) in open_date"
                    :key="index"
                    @click="click(index)"
                    >{{ item.name }}</view
                >
            </scroll-view>

            <view class="allNav" @click.stop="show = true">全部</view>
        </view>

        <view
            class="botBox"
            v-for="(item, index) in site_time"
            :key="index"
            v-if="current == index">
            <view class="listBox" v-for="(subItem, subIndex) in item" :key="subIndex">
                <view class="ImgBox">
                    <image
                        :src="$imgUrls(subItem.img)"
                        mode="aspectFill"
                        class="subItem_img"></image>
                </view>
                <view class="conList">
                    <text class="title">{{ subItem.name }}</text>
                    <view class="row m-top6" v-if="subItem.site_bao_fang.state == 0">
                        <view
                            class="privce_list"
                            v-for="(tItem, tIndex) in subItem.all_price_info"
                            :key="tIndex">
                            {{ tItem.data }}
                        </view>
                    </view>
                    <view class="tagBox" v-if="subItem.label && subItem.label.length">
                        <view
                            class="tabLi"
                            v-for="(bItem, bIndex) in subItem.label"
                            :key="bIndex"
                            >{{ bItem }}</view
                        >
                    </view>
                    <view class="time" v-if="subItem.site_bao_fang.state == 0">
                        <text class="time_name">开宴时间：</text>
                        <text class="time_start">{{ subItem.open_time }}</text>
                    </view>

                    <view
                        class="toBtn"
                        :class="subItem.available_site > 0 ? 'Reserve' : 'fullBtn'"
                        @click="NowReserve(subItem)"
                        v-if="subItem.site_bao_fang.state == 0">
                        {{ subItem.available_title }}
                        <!-- {{ subItem.available_site > 0 ? '预定' : '已满' }} -->
                    </view>
                    <view
                        class="toBtn Reserve"
                        v-if="subItem.site_bao_fang.state == 1"
                        @click="NowReserve(subItem)"
                        >预定
                    </view>
                </view>
            </view>
        </view>

        <view class="Contact">
            <view class="list" @click="$common.Tel(service_tel)">
                <text class="name">服务电话：{{ service_tel }}</text>
            </view>
            <view class="list" @click="openLocat">
                <view class="iconfont icon-a-zu1418 size34 color_99 m-right14"></view>
                <text class="name">地图导航</text>
            </view>
        </view>
        <contact></contact>

        <u-calendar
            :show="show"
            ref="calendar"
            :showSubtitle="false"
            mode="single"
            :color="color"
            :defaultDate="customList[current]"
            :customList="customList"
            monthNum="2"
            @confirm="confirm"
            @close="show = false">
        </u-calendar>

        <u-popup :show="showContent" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="sowCng">
                <text class="Title">预定须知</text>
                <view class="cponView">
                    <u-parse :content="site_config.content"></u-parse>
                </view>
                <view class="botFot">
                    <view class="notconti" @click="ageBtn">
                        <text class="white size28">我已阅读并同意此协议</text>
                        <text class="size28 white" v-if="ageTime > 0">({{ ageTime }}s)</text>
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- <u-popup :show="isOk" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone" v-if="reconfirmData">
				<text class="size36 bold black p-top10 p-bot10 t-letter4">您预订的餐秀</text>
				<view class="row a-center black size30 p-top30 p-left20"
					>宴会名称：{{ reconfirmData.name }}
				</view>
				<view class="row a-center black size30 p-top30 p-left20"
					>宴会日期：{{ open_date[current].name }}</view
				>
				<view class="row a-center black size30 p-top30 p-left20"
					>开宴时间：{{ reconfirmData.open_time }}
				</view>
				
				<view class="row j-sa a-center m-top70 m-bot20">
					<view class="okbtn Cancel" @click="isOk = false">取消</view>
					<view class="okbtn Continue" @click="Config_btn">确定</view>
				</view>
			</view>
		</u-popup> -->
        <u-popup
            :show="isOk"
            mode="center"
            bgColor="transparent"
            :round="10"
            :safeAreaInsetBottom="false">
            <view class="sowCone" v-if="reconfirmData">
                <!-- <text class="size36 bold black p-top10 p-bot10 t-letter4">您预订的餐秀</text> -->
                <view class="row a-center p-top180 sowConelist"
                    >宴会名称：{{ reconfirmData.name }}
                </view>
                <view class="row a-center p-top10 sowConelist"
                    >宴会日期：{{ open_date[current].name }}</view
                >
                <view class="row a-center p-top10 sowConelist"
                    >开宴时间：{{ reconfirmData.open_time }}
                </view>

                <view class="row j-centert">
                    <view class="okbtn Cancel" @click="isOk = false">取消</view>
                    <view class="okbtn Continue" @click="Config_btn">确定</view>
                </view>
            </view>
        </u-popup>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
        <showKefu v-if="Service" @cancelFunc="Service = false"></showKefu>

        <tabBar :tab="1"></tabBar>

        <!-- <view class="SerBox">
			<view class="list" @click="Service = true">
				<view class="iconfont icon-a-008 color_920 size42"></view>
			</view>
			<view class="list" @click="openLocat">
				<view class="iconfont icon-daohang color_920 size42"></view>
			</view>
		</view> -->
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import showKefu from '@/components/showKefu.vue';
    export default {
        components: {
            showKefu,
        },
        data() {
            return {
                scrollintoview: '',
                Service: false,
                showModal: false,
                banner: [],
                customList: [],
                open_date: [],
                site_time: [],
                current: 0,
                inactiveStyle: {
                    fontSize: '13px',
                    color: '#606266',
                },
                activeStyle: {
                    fontSize: '13px',
                    color: '#000',
                },
                itemStyle: {
                    height: '56px',
                },
                show: false,
                showContent: false,
                color: '#d85e59',
                site_config: '',
                ageTime: 3,
                ageFlge: false,
                ageDown: null,
                ageId: '',
                isOk: false,
                reconfirmData: '',
            };
        },

        onLoad(opt) {
            this.getSiteTimeList();
        },

        methods: {
            getSiteTimeList() {
                this.$http
                    .get({
                        url: '/SiteApiV2/getSiteTimeList',
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.site_config = Result.site_config;
                        this.banner = Result.banner || [];
                        this.customList = Result.open_calender || [];
                        this.open_date = Result.open_date || [];
                        this.site_time = Result.site_time_day_time || [];
                        this.showContent = true;
                        this.ageDown = setInterval(() => {
                            if (this.ageTime > 0) {
                                this.ageTime--;
                            } else {
                                clearInterval(this.ageDown);
                            }
                        }, 1000);
                    });
            },
            NowReserve(reconfirmData) {
                if (!this.vid) return (this.showModal = true);
                const site_bao_fang = reconfirmData.site_bao_fang;
                if (reconfirmData.available_site <= 0 && site_bao_fang.state == 0)
                    return this.$Toast(`坐席${reconfirmData.available_title}`);
                this.reconfirmData = reconfirmData;

                if (site_bao_fang.state == 1)
                    return this.toUrl(`SelectBao?id=${this.reconfirmData.id}`);
                this.isOk = true;
            },
            click(index) {
                this.current = index;
                if (index <= 1) return (this.scrollintoview = `tabs0`);
                this.scrollintoview = `tabs${index - 1}`;
            },

            confirm(e) {
                const Index = this.customList.findIndex((n) => n == e[0]);
                this.current = Index;
                this.show = false;
            },

            ageBtn() {
                if (this.ageTime > 0) return;
                this.showContent = false;
            },
            CloseAge() {
                clearInterval(this.ageDown);
                this.showContent = false;
                this.ageTime = 3;
            },
            Config_btn() {
                this.isOk = false;
                this.toUrl(`Selectseat?id=${this.reconfirmData.id}`);
            },
            openLocat() {
                const Shop = this.config_shop.find((n) => n.config_shop_id == this.config_shop_id);
                uni.openLocation({
                    latitude: Number.parseFloat(Shop.pointy),
                    longitude: Number.parseFloat(Shop.pointx),
                    name: Shop.name,
                    address: Shop.address,
                    success() {
                        console.log('打开成功');
                    },
                    fail(err) {
                        console.log(err);
                        uni.showToast({
                            title: '打开失败!',
                            icon: 'none',
                        });
                    },
                });
            },
        },
        onUnload() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },
        onHide() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },

        computed: {
            ...mapState(['vid', 'startUp', 'config_shop', 'config_shop_id']),
            service_tel() {
                if (!this.config_shop.length) return;
                const Shop = this.config_shop.find((n) => n.config_shop_id == this.config_shop_id);
                return Shop ? Shop.tel : '';
            },
        },
    };
</script>

<style lang="scss">
    page {
        background-color: $pages;
    }
</style>
<style lang="scss" scoped>
    .SerBox {
        position: fixed;
        right: 20rpx;
        top: 30%;
        display: flex;
        flex-direction: column;

        .list {
            width: 80rpx;
            height: 80rpx;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20rpx;
        }
    }
    .sowCng {
        width: 680rpx;
        // height: 1100rpx;

        display: flex;
        flex-direction: column;
        align-items: center;
        .Title {
            width: 100%;
            height: 100rpx;
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cponView {
            width: 500rpx;
            // flex: 1;
            max-height: 800rpx;
            overflow-y: scroll;
        }
        .botFot {
            width: 100%;
            height: 130rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .notconti {
                width: 500rpx;
                height: 90rpx;
                background-color: $color_d85;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .sowCone {
        width: 680rpx;
        height: 544rpx;
        background-image: url('https://msraimgcdn.mogoie.com/6142/1762329989422.png');
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .sowConelist {
            padding-left: 140rpx;
            font-size: 30rpx;
            color: #000;
        }
    }

    .cponView {
        width: 100%;
        height: 760rpx;
        overflow-y: scroll;
        padding: 30rpx 10rpx;
    }

    .botFot {
        width: 100%;
        height: 130rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .notconti {
        width: 500rpx;
        height: 90rpx;
        background-color: #d7b06d;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Swiper {
        width: 100%;
        height: 750rpx;
    }

    .Swiper swiper-item {
        width: 100%;
        height: 100%;
    }

    .Nav {
        width: 100%;
        height: 100rpx;
        background-color: $pages;
        margin-top: -20rpx;
        position: relative;
        z-index: 100;
        border-radius: 20rpx 20rpx 0 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        box-shadow: rgba(51, 51, 51, 0.1) 0px -10px 30rpx;
    }

    .u-tabs {
        width: 630rpx;
        padding-left: 20rpx;

        .list {
            display: inline-block;
            padding: 14rpx 20rpx;
            color: #000;
            font-size: 30rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
        }

        .Active {
            background-image: linear-gradient(45deg, #d85e59 0%, #e59689 99%, #e59689 100%);
            color: #fff;
        }
    }

    .allNav {
        width: 120rpx;
        height: 100%;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        flex-shrink: 0;
    }

    .botBox {
        padding-bottom: 30rpx;
        padding: 10rpx;
    }

    .listBox {
        width: 100%;
        background-color: #ffffff;
        padding: 20rpx 20rpx 40rpx 20rpx;
        border-radius: 10rpx;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 20rpx;
    }

    .ImgBox {
        width: 176rpx;
        height: 176rpx;
        // background-color: $color_d9a;
        border-radius: 16rpx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        flex-shrink: 0;

        .subItem_img {
            width: 176rpx;
            height: 176rpx;
            border-radius: 6rpx;
            overflow: hidden;
        }
    }

    .conList {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .Nowreserve {
        width: 240rpx;
        margin-left: 10rpx;
        position: relative;

        .NowTxt {
            color: #000;
            font-size: 26rpx;
            position: absolute;
            left: 20rpx;
            bottom: 12rpx;
            z-index: 100;
        }
    }

    .title {
        color: #000;
        font-weight: bold;
        font-size: 34rpx;
    }

    .time {
        margin-top: 14rpx;
        display: flex;
        align-items: center;

        .time_name {
            color: #666;
            font-size: 24rpx;
        }

        .time_start {
            color: #333;
            font-size: 30rpx;
            font-weight: bold;
        }
    }

    .toBtn {
        width: 140rpx;
        height: 58rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        position: absolute;
        right: 20rpx;
        bottom: 18rpx;
        border-radius: 28rpx;
    }

    .Reserve {
        background-color: $color_d85;
        color: #fff;
    }

    .fullBtn {
        border: 1rpx solid $color_d85;
        color: $color_d85;
    }

    .privce_list {
        padding: 2rpx 4rpx;
        color: #666;
        font-size: 24rpx;
        font-weight: normal;
        margin-right: 6rpx;
    }

    .privce_list:nth-child(3n) {
        margin-right: 0 !important;
    }

    .tagBox {
        width: 100%;
        display: flex;

        .tabLi {
            padding: 4rpx 12rpx;
            // border: 1rpx solid $color_d85;
            // color: $color_d85;
            border: 1rpx solid $color_eec;
            color: $color_eec;
            margin-top: 14rpx;
            font-size: 22rpx;
            margin-right: 12rpx;
            border-radius: 6rpx;
        }

        .tabLi:last-child {
            margin-right: 0;
        }
    }

    .privce_discount {
        font-size: 20rpx;
        color: #981211;
        scale: 0.9;
    }

    .privce_Origina {
        font-size: 22rpx;
        color: #999;
        margin-top: 2rpx;
        text-decoration: line-through;
    }

    .RemainingBox {
        width: 100%;
        padding-left: 150rpx;
        padding-right: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;
    }

    .Remaining {
        color: #000;
        font-size: 24rpx;
        margin-right: 16rpx;
        margin-top: 6rpx;
    }

    /deep/.u-calendar-month__title {
        display: none !important;
    }

    .okbtn {
        width: 200rpx;
        height: 70rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        margin: 50rpx 14rpx 20rpx 14rpx;
    }

    .Cancel {
        background-color: #f1f1f1;
        color: #000;
    }

    .Continue {
        background-color: $color_d85;
        color: #ffffff;
    }

    .Contact {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50rpx;

        .list {
            display: flex;
            align-items: center;
            margin: 0 4rpx;
            padding: 20rpx 10rpx;
        }

        .name {
            color: #b0a79d;
            font-size: 30rpx;
        }
    }
</style>
